<template>
  <div id="app">
    <listPage :records="records" @search="search" @open="open" />
    <detailPage v-show="flag" @close="close" />
  </div>
</template>

<script>
import listPage from './components/listPage';
import detailPage from './components/detailPage'
export default {
  data() {
    return {
      flag: false,
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        }
      ]
    }
  },
  methods: {
    search(value) {
      const list = this.records.filter(item => item.doctor.includes(value))
      if(list.length >= 1){
        this.records = list
      }
    },
    open() {
      this.flag = true
    },
    close() {
      this.flag = false
    }
  },


  components: {
    listPage,
    detailPage
  }
}
</script>

<style></style>
